<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="list">
      <div>
        <div v-for="(item,i) in itemTitle"
             :key="i"
             @click="toItem(i+1)"
             :class="activeKey==(i+1)?'focus':''">{{ item }}</div>
      </div>
    </div>
    <hai-lao-high-seas-tab v-if="isShowHaoLaoHighSeas && activeKey == 1" ref="HaiLaoHighSeasTab"></hai-lao-high-seas-tab>
    <legacy-list-high-seas-tab v-if="isShowLegacyListHighSeas && activeKey == 2" ref="LegacyListHighSeasTab"></legacy-list-high-seas-tab>
    <scrap-order-high-seas-tab v-if="activeKey == 3" ref="ScrapOrderHighSeasTab"></scrap-order-high-seas-tab>
    <person-high-seas-tab v-if="isShowPersonHighSeas && activeKey == 4" ref="PersonHighSeasTab"></person-high-seas-tab>
    <deal-design-high-seas-tab v-if="isShowDealDesignHighSeas && activeKey == 5" ref="DealDesignHighSeasTab"></deal-design-high-seas-tab>
    <deal-design-legacy-list-high-seas-tab v-if="isShowDealDesignHighSeas && activeKey == 6"
                                           ref="DealDesignLegacyListHighSeasTab"></deal-design-legacy-list-high-seas-tab>
  </div>


  <!--<div style="width: 100%;overflow: scroll">
    <a-tab-pane key="1" v-if="isShowHaoLaoHighSeas" tab="海捞公海库">
      <hai-lao-high-seas-tab ref="HaiLaoHighSeasTab"></hai-lao-high-seas-tab>
    </a-tab-pane>
    <a-tab-pane key="2" tab="遗单公海库" v-if="isShowLegacyListHighSeas">
      <legacy-list-high-seas-tab ref="LegacyListHighSeasTab"></legacy-list-high-seas-tab>
    </a-tab-pane>
    <a-tab-pane key="3" tab="废单公海库">
      <scrap-order-high-seas-tab ref="ScrapOrderHighSeasTab"></scrap-order-high-seas-tab>
    </a-tab-pane>
    <a-tab-pane key="4" tab="个人公海库" v-if="isShowPersonHighSeas">
      <person-high-seas-tab ref="PersonHighSeasTab"></person-high-seas-tab>
    </a-tab-pane>
    <a-tab-pane key="5" tab="设计成交公海库" v-if="isShowDealDesignHighSeas">
      <deal-design-high-seas-tab ref="DealDesignHighSeasTab"></deal-design-high-seas-tab>
    </a-tab-pane>
    <a-tab-pane key="6" tab="设计成交遗单库" v-if="isShowDealDesignHighSeas">
      <deal-design-legacy-list-high-seas-tab
        ref="DealDesignLegacyListHighSeasTab"></deal-design-legacy-list-high-seas-tab>
    </a-tab-pane>
    &lt;!&ndash;<a-tabs type="card" @change="callback" >

    </a-tabs>&ndash;&gt;
  </div>-->

</template>

<script>

  import '@assets/less/TableExpand.less'
  import {getAction} from '@api/manage'
  import HaiLaoHighSeasTab from './tab/HaiLaoHighSeasTab'
  import LegacyListHighSeasTab from './tab/LegacyListHighSeasTab'
  import PersonHighSeasTab from './tab/PersonHighSeasTab'
  import ScrapOrderHighSeasTab from './tab/ScrapOrderHighSeasTab'
  import DealDesignHighSeasTab from './tab/DealDesignHighSeasTab'
  import DealDesignLegacyListHighSeasTab from './tab/DealDesignLegacyListHighSeasTab'
  import Vue from 'vue'
  import {USER_INFO} from '@/store/mutation-types'

  export default {
    name: 'GhCustomerSubmitList',
    components: {
      HaiLaoHighSeasTab,
      LegacyListHighSeasTab,
      PersonHighSeasTab,
      ScrapOrderHighSeasTab,
      DealDesignHighSeasTab,
      DealDesignLegacyListHighSeasTab,
    },
    data() {
      return {
        description: 'gh_customer_submit管理页面',
        activeKey: "1",
        itemTitle: [
          "海捞公海库",
          "遗单公海库",
          "废单公海库",
          "个人公海库",
          "渠道公海库",
          "渠道遗单库",
        ],
        url: {
          selectDepartByUserName: '/ghCustomerSubmit/queryDepartByUserName',
        },
        isShowHaoLaoHighSeas: true,
        isShowDealDesignHighSeas: true,
        isShowLegacyListHighSeas: true,
        isShowPersonHighSeas: true,
      }
    },
    created() {
      this.initHighSeasData();
    },
    mounted() {
      this.callback(1);
    },
    methods: {
      callback(key) {
        switch (key) {
          case 1:
            this.$refs.HaiLaoHighSeasTab.loadData();
            break;
          case 2:
            this.$refs.LegacyListHighSeasTab.initProgressData();
            this.$refs.LegacyListHighSeasTab.loadData();
            break;
          case 3:
            this.$refs.ScrapOrderHighSeasTab.initProgressData();
            this.$refs.ScrapOrderHighSeasTab.loadData();
            break;
          case 4:
            this.$refs.PersonHighSeasTab.loadData();
            break;
          case 5:
            this.$refs.DealDesignHighSeasTab.loadData();
            break;
          case 6:
            this.$refs.DealDesignLegacyListHighSeasTab.loadData();
            break;
        }
      },
      initHighSeasData() {
        let user = Vue.ls.get(USER_INFO)
        getAction(this.url.selectDepartByUserName, {username: user.username}).then(res => {
          if (res.success) {
            if (res.result.indexOf("market") !== -1) {
              if (user.departIds != null && user.departIds !== '') {
                this.isShowHaoLaoHighSeas = true
              } else {
                this.isShowHaoLaoHighSeas = false
              }
              //如果是市场部用户，则不显示设计成交部公海库
              this.isShowDealDesignHighSeas = false;
            }
            if (res.result.indexOf("design") !== -1) {
              this.isShowPersonHighSeas = false;
              this.isShowHaoLaoHighSeas = false;
              this.isShowLegacyListHighSeas = false;
              this.isShowDealDesignHighSeas = true;
            }
          }
        })
      },
      toItem(i){
        this.activeKey = i
      }
    }
  }
</script>
<style scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }
  .list{
    width: 100%;
    height: 50px;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #f6f6f6;
    &>div{
      display: flex;
      width: max-content;
      div{
        width: 100px;
        line-height: 50px;
        text-align: center;
      }
      div::after{
        display: block;
        margin: -3px auto 0;
        width: 0px;
        height: 2px;
        content: '';
        background-color: #40a9ff;
      }
      .focus{
        color: #40a9ff;
      }
      .focus::after{
        width: 4em;
        transition: 0.5s;
      }
    }
  }
</style>